<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../script/mui.min.js"></script>
		<!--<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />-->
		<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
		<link rel="stylesheet" type="text/css" href="../css/myapp.css"/>
		<style type="text/css">
			body {
				background-color: #fff;
			}
			
			.title {
				padding: 10px 15px;
				text-align: left;
			}
			
			.title .date {
				font-size: 13px;
			}
			
			.title h3 {
				font-size: 22px;
				font-weight: 600;
			}
			
			.title p {
				margin-bottom: 2px;
			}
			
			.title:after {
				position: absolute;
				right: 0;
				/*bottom: 0;*/
				left: 15px;
				right: 15px;
				height: 1px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			.content {
				padding: 10px 15px;
			}
			
			.content{
				font-size: 16px;
				color: #1C1C26;
				line-height: 24px;
			}
			.content p{
				font-size: 16px;
				color: #1C1C26;
				line-height: 24px;
			}
		
			.content img {
				width: 100%;
				text-align: center;
			}
		</style>
	</head>

	<body>

		<div class="mui-content" id="content">
			<div class="spinner"></div>
		</div>
		<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
		<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/html" id="articleTem">
			
			<div class="title">
				<h3>{{title}}</h3>
				<p class="date">{{source}} {{createdtime}}</p>
			</div>
			<div class="content">
				{{if thumb!=""}}<p><img src="{{thumb}}"/></p>{{/if}}
				{{#body}}
			</div>
			<button class="aui-btn-block" id="share">分享本文</button>
		</script>
		<script type="text/javascript">
			MYPAGE = {};
			apiready = function() {
				var data = api.pageParam;
				var url = MYAPP.webroot + "/api/index.php/Home/Article/article/id/"+data.id;
				api.ajax({
					url: url,
					method: 'get',
					timeout: 30,
					dataType: 'json',
					returnAll: false
				}, function(ret, err) {
					if (ret) {
						var html = template('articleTem',ret);
						document.getElementById("content").innerHTML = html;
//						alert(JSON.stringify(ret));      
						var url = MYAPP.webroot+"/article/"+ret.id;
						var thumb = ret.thumb;
						var title = ret.title;
						MYPAGE.sharePara = {
						    title:title,
						    text:title,
						    imgPaths:thumb,
						    url: url
						}
						document.getElementById("share").addEventListener('click',function(){
							api.sendEvent({
								name: 'share'
							});
						});
					}
				});
				
				api.addEventListener({
				    name: 'share'
				}, function(ret, err){
					api.openFrame({
						bounces: false,
						bgColor: 'rgba(0,0,0,0.5)',
						name: 'share',
						url: 'share_body.html',
						pageParam: MYPAGE.sharePara,
						rect: {
							x: 0,
							y: 0,
							w: 'auto',
							h: 'auto'
						}
					});
				});
				
				
			}
		</script>
	</body>

</html>